<!-- Page Heading -->

<div class="d-flex flex-row-reverse">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb nb-breadcrumb">
      <li class="breadcrumb-item">
        <a [routerLink]="['/dashboard']">Dashboard</a>
      </li>
      <li class="breadcrumb-item active" aria-current="page">User Management</li>
    </ol>
  </nav>
  <h1 class="nb-heading-one mr-auto">User Management</h1>
</div>
<div class="pb-4">
  <button mat-raised-button color="primary" (click)="addUser()">
    <i class="fa fa-plus-circle"></i> Add User</button>
  <mat-form-field class="float-right">
    <mat-select placeholder="Filter by Role" (change)="roleFilter($event)" name="roleFilter">
      <mat-option *ngFor="let obj of objRoleList" [value]="obj.roleName">
        {{ obj.roleName }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<mat-card class="nb-dashboard-table">
  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="SN">
      <mat-header-cell class="symbol-no" *matHeaderCellDef> SN </mat-header-cell>
      <mat-cell class="symbol-no" *matCellDef="let element let i=index">{{preIndex+(i+1)}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="First Name">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Last Name">
      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="User Name">
      <mat-header-cell *matHeaderCellDef>User Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="2FA Enabled">
      <mat-header-cell class="text-center" *matHeaderCellDef>2FA Enabled</mat-header-cell>
      <mat-cell class="text-center" *matCellDef="let element" [ngSwitch]="element.twoFactorAuthEnabled">
        <i *ngSwitchCase="true" class="fa green fa-check" aria-hidden="true"></i>
        <i *ngSwitchCase="false" class="fa red fa-times" aria-hidden="true"></i>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Role">
      <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.userRole}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Actions">
      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
      <mat-cell class="nb-icon-cell" *matCellDef="let element let i=index">
        <button mat-mini-fab class="material-icon-sm" color="primary" (click)="showUserDetail(element._id)" title="View" href="javascript:void(0)">
          <i class="fa fa-eye"></i>
        </button>
        <button mat-mini-fab class="material-icon-sm" title="Edit" (click)="editUser(element._id)" href="javascript:void(0)">
          <i class="far fa-edit"></i>
        </button>
        <button mat-mini-fab class="material-icon-sm btn-green" title="Manage" (click)="manage(element._id)" href="javascript:void(0)">
          <i class="fas fa-sliders-h"></i>
        </button>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
    <mat-paginator *ngIf="objResponse?.dataList?.length>0" [length]="totalItems" [pageSize]="perPage" [pageSizeOptions]="pageSizeOptions" (page)="pageChanged($event)">
    </mat-paginator>
</mat-card>
